import React from 'react';
import { connect } from 'react-redux';
import BaseComponent from '../../components/common/baseComponent.js';
import { getQueryParam } from '../../utils/url';
import successIcon from '../../../assets/images/result/success.png';
import moreCouponIcon from '../../../assets/images/cq/coupon/more_coupon.png';

@connect(({ refuel }) => {
  return {
    detail: refuel.get('refuelDetail'),
  };
})
class Result extends BaseComponent {
  componentDidMount() {
    const orderNo = getQueryParam('orderNo');
    if (orderNo) {
      this.props.dispatch({
        type: 'refuel/fetchRefuelDetail',
        payload: {
          orderNo,
        },
      });
    }
  }

  goMoreCoupon = () => {
    this.props.history.push('moreCoupon');
  }

  goHome = () => {
    if (window.source === 'TAOBAO') {
      this.props.history.push('/tmall/couponList');
    } else if (window.source === 'COMMON') {
      this.props.history.push('/wap/home');
    } else {
      this.props.history.push('/cq/home');
    }
  }

  render() {
    const { detail } = this.props;
    let couponView;
    if (window.source === 'CHONGQINGPUBLIC') {
      couponView = <img src={moreCouponIcon} alt="" className="coupon-icon" onClick={this.goMoreCoupon} />;
    }
    let orderView;
    if (detail) {
      let phoneView;
      if (detail.get('phone')) {
        phoneView = (
          <div className="text-row">
            <div>手机号：</div>
            <div className="row-value">{detail.getMobile()}</div>
          </div>
        );
      }
      orderView = (
        <div className="order-view">
          <div className="order-header">
            {detail.get('payTime')}
          </div>
          <div className="order-body">
            <div className="text-row">
              <div>订单编号：</div>
              <div className="row-value">{detail.get('orderNo')}</div>
            </div>

            <div className="text-row">
              <div>加油油站：</div>
              <div className="row-value">{detail.get('stationName')}</div>
            </div>
            <div className="text-row">
              <div>加油金额：</div>
              <div className="row-value">{detail.get('orderAmountYuan')}</div>
            </div>
            <div className="text-row">
              <div>优惠金额：</div>
              <div className="row-value">{detail.get('disAmountYuan')}</div>
            </div>
            <div className="text-row">
              <div>实付金额：</div>
              <div className="row-value">{detail.get('payAmountYuan')}</div>
            </div>
            <div className="text-row">
              <div>加油油枪号：</div>
              <div className="row-value">{detail.get('gunNo')}</div>
            </div>
            {phoneView}
          </div>
        </div>
      );
    }
    return (
      <div className="result-page">
        <div className="content">
          <img src={successIcon} alt="" className="icon" />
          <div className="title">支付成功</div>
          {orderView}
          <div className="action-btn" onClick={this.goHome}>返回首页</div>
          {couponView}
        </div>
      </div>
    );
  }
}

export default Result;
